<template>
  <div>
    <div class="list">
      <div>
        <div class="touxiang2">
          <i class="iconfont icon-ziyuan87"></i>
        </div>
        <span>认识的人</span>
      </div>
      <div class="red" @click="star()">
        <i class="iconfont icon-fy_ic_vip"></i>
        <span>明星用户</span>
      </div>
      <div @click="yinyr()" class="red">
        <i class="iconfont icon-yinlemusic215"></i>
        <span>音乐人</span>
      </div>
      <div>
        <div class="touxiang2 yell">
          <i class="iconfont icon-xingxing"></i>
        </div>
        <span>音乐达人</span>
      </div>
      <div>
        <div class="touxiang2">
          <i class="iconfont icon-fujin"></i>
        </div>

        <span>附近的人</span>
      </div>
    </div>
    <Pes />
    <router-view></router-view>
  </div>
</template>

<script>
import Pes from "./peson.vue";
export default {
  components: {
    Pes,
  },
  methods: {
    star() {
      this.$router.push("/star");
    },
    yinyr() {
      this.$router.push("/yinyuer");
    },
  },
};
</script>

<style scoped>
.list {
  padding-left: 0.3rem;
  padding-right: 0.3rem;
  height: 2.37rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 0.7rem;
  font-size: 0.23rem;
  color: #3b3b3b;
  font-weight: 550;
  padding-bottom: 0.39rem;
  border-bottom: 0.03rem solid #f9f9f9;
}
.touxiang2 {
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background-color: #2197f9;
  text-align: center;
  line-height: 1.05rem;
  margin-bottom: 0.22rem;
}
.icon-ziyuan87 {
  color: #fffeff;
  font-size: 0.5rem;
}
.icon-fy_ic_vip {
  display: inline-block;
  font-size: 1.2rem;
  color: #ef443c;
  padding-bottom: 0.05rem;
}
span {
  display: block;
}
.icon-yinlemusic215 {
  display: inline-block;
  font-size: 1.05rem;
  color: #ef443c;
  padding-bottom: 0.09rem;
}
.yell {
  background-color: #febb26;
}
.icon-xingxing {
  font-size: 0.43rem;
  color: #fff;
}
.icon-fujin {
  font-size: 0.47rem;
  color: #fff;
}
.red {
  text-align: center;
}
</style>